<template>
    <div class="goodsBtn">
      <ul class="list">
        <li class="item" v-for="(good, index) in goodsArr">
          <div @click="goPin(index)" class="a">
            <div class="top">
              <div class="pic left">
                <img :src="good.mallImg" alt="">
              </div>
              <div class="right">
                <span class="goodsName">{{good.mallName}}</span>
                <p class="goodsPrice">
                  <span class="red">￥{{good.salePrice/100}}</span>
                  <span class="gray">京东价：{{good.jdPrice/100}}</span>
                </p>
                <p class="goodsTime">
                  还差{{good.lackCount}}人，
                  <Countdown :gpEndTime="Date.parse(new Date(good.gpEndTime)).toString()" endText="已经Jie" ref="cd"></Countdown>
                </p>
              </div>
            </div>
          </div>
          <div class="bottom">
            <!--<button class="btn1" @click="addCar(index)"><img src="../assets/images/home/addCar.jpg" alt=""></button>-->
            <button class="btn2" @click="goPin(index)"><img src="../assets/images/home/pinDan.jpg" alt=""></button>
          </div>
        </li>
      </ul>
      <p class="goodsNone">{{noMore?'没有更多':'上拉加载更多'}}</p>
    </div>
</template>

<script>
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  /* eslint-disable semi */

  export default {
    name: 'goods',
    props: {
      goodsArr:{
        type : Array,
        default: []
      },
      noMore:{
        type : Boolean,
        default: false
      }
  },
    data () {
      return {
//        isShow: false
      }
    },
    methods: {
//      addCar (index) {
//        alert(this.goodsArr[index].id);
//      },
//      pinDan () {
//        this.$router.push('/PinGoodsDetail');
//      },
      goPin (index) {
        // 拼单商品的规格id
        window.localStorage.msId = this.goodsArr[index].msId;
        window.localStorage.gpId =this.goodsArr[index].gpId
        window.localStorage.mallId=this.goodsArr[index].mallId
        console.log(JSON.parse(window.localStorage.msId));
        this.$router.push({
//          name: 'PinDetail',
          path:'/pindetail',
          query: {
            shopId: window.localStorage.shopId,
            msId: window.localStorage.msId,
            gpId: window.localStorage.gpId,
            shopType: 1
          }
        });
      }
    },
    created () {
//      this.gpEndTime();
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
    }
  }
</script>

<style>
  .goodsBtn {
    /*width: 100%;*/
    margin-top: 3px;
  }
  .goodsBtn ul {
    display: flex;
    flex-flow: row wrap;
    /*width: 100%;*/
  }
  .goodsBtn li {
    background: #ffffff;
    width: 100%;
    height: 370px;
    margin-bottom: 20px;
    border-top: 1px solid #f4f4f4;
  }
  .goodsBtn ul li .top {
    height: 277px;
    /*width: 100%;*/
    border-bottom: 1px solid rgba(244, 244, 244, 1);
  }
  .goodsBtn ul li .top .pic{
    width: 220px;
    height: 220px;
    margin: 25px 0 0 30px;
    background: #f3f7fb;
  }
  .goodsBtn ul li .top .pic img{
    /*display: inline-block;*/
    width: 220px;
    height: 220px;
  }
  .goodsBtn ul li .top .right {
    font-size: 30px;
    margin-top: 25px;
    width: 53%;   /*让文本自动换行，自适应*/
    margin-left: 30px;
    float: left;
  }
  .goodsBtn ul li .top .right>.goodsName {
    color: #3b3b43;
    /*只显示两行文字*/
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .goodsBtn ul li .top .right .goodsPrice {
    margin: 30px 0;
  }
  .goodsBtn ul li .top .right .goodsPrice .gray{
    font-size: 20px;
    /*text-align: center;*/
    margin-left: 45px;
  }
  .goodsBtn ul li .top .right .goodsTime{
    font-size: 25px;
    color: #3b3b43;
  }
  /*加入购物车和立即拼单按钮*/
  .goodsBtn ul li .bottom {
    float: right;
  }
  .goodsBtn ul li .bottom button{
    margin: 15px 30px 0 0;
    border: none;
    outline: none;
    border-radius: 30px;
    background: none;
  }
  .goodsBtn ul li .bottom img {
    width: 180px;
    height: 60px;
  }
  .goodsBtn ul li .bottom .btn1 {
    right: 237px;
  }
  .goodsBtn ul li .bottom .btn2 {
    right: 30px;
  }

/*已经到最底部*/
  .goodsBtn .goodsNone{
    color: #D3D3D3;
    text-align: center;
    padding: 0 0 20px 0;
  }
</style>
